'use client';
import Image from 'next/image';

const applicationScenes = [
  {
    title: '大型设备包装',
    image: '/images/cases/equipment1.png',
    description: '大型设备包装',
  },
  {
    title: '机柜包装',
    image: '/images/cases/cabinet1.png',
    description: '机柜包装',
  },
  {
    title: '海运包装',
    image: '/images/cases/shipping1.jpg',
    description: '海运包装',
  },
  {
    title: '危险品包装',
    image: '/images/cases/dangerous1.png',
    description: '危险品包装',
  },
  {
    title: '机械臂',
    image: '/images/cases/robot1.png',
    description: '机械臂',
  },
  {
    title: '货运包装',
    image: '/images/cases/freight1.png',
    description: '货运包装',
  },
  {
    title: '立体仓库',
    image: '/images/cases/warehouse1.png',
    description: '立体仓库',
  },
  {
    title: '智能仓储',
    image: '/images/cases/smart1.png',
    description: '智能仓储',
  },
  {
    title: '大型仓储',
    image: '/images/cases/storage1.png',
    description: '大型仓储',
  },
  {
    title: '机柜包装',
    image: '/images/cases/jiGUi.png',
    description: '机柜包装',
  },
];

export default function ApplicationScenes() {
  return (
    <div className="min-h-screen py-8">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <h1 className="text-2xl font-bold">应用场景</h1>
          <div className="mt-4 text-gray-600">
            <p>富强木制品（东莞）有限公司专业提供各类包装解决方案，包括：</p>
            <ul className="mt-2 list-disc list-inside">
              <li>胶合卡板、木卡板、出口卡板等托盘类产品</li>
              <li>钢带箱、环保木箱、出口木箱等包装箱类产品</li>
              <li>免检卡板、异形卡板等特种包装产品</li>
            </ul>
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {applicationScenes.map((scene, index) => (
            <div
              key={index}
              className="group cursor-pointer"
              itemScope
              itemType="http://schema.org/ImageObject"
            >
              <div className="relative aspect-square overflow-hidden">
                <Image
                  src={scene.image}
                  alt={scene.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-110"
                  itemProp="contentUrl"
                />
              </div>
              <div className="text-center mt-3">
                <h3 className="text-gray-800 font-medium" itemProp="name">
                  {scene.title}
                </h3>
                <p
                  className="text-gray-600 text-sm mt-1"
                  itemProp="description"
                >
                  {scene.description}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 text-gray-600">
          <h2 className="text-xl font-bold mb-4">专业的包装解决方案</h2>
          <p>
            我们在行业内经过多年发展，兢兢业业为客户提供高质量的产品和优质的服务，
            赢得了众多知名企业的信赖。我们的产品广泛应用于电子、机械、化工等各个领域，
            可根据客户需求提供定制化的包装解决方案。
          </p>
        </div>
      </div>
    </div>
  );
}
